
import React from 'react';
import PropTypes from 'prop-types';
import {injectIntl} from './intl';
import {Card, Row, Col, Table, Popover, Divider} from 'antd';
import {DATE_FORMAT, TABLE} from '../constants';
import {formatDateTime, conventEnumValueToString, formatAmount} from '../utils';
import {repairType, currency} from '../Enum';
import DescriptionList from 'ant-design-pro/lib/DescriptionList';
const {Description} = DescriptionList;
import styles from './style.css';
import {renderBoolean} from './utils';
import WorkItemTablePanel from './WorkItemTablePanel';
/* eslint-disable react/prefer-stateless-function */
class Detail extends React.PureComponent {
    render() {
        const {details = [], accessoryDetails = [], workItemDetails = []} = this.props.detail;
        const columnMaterials = [
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.materialTablePanel.usedPartCode',
                    defaultMessage: '旧件编号'
                }),
                dataIndex: 'usedPartCode'
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.materialTablePanel.usedPartName',
                    defaultMessage: '旧件名称'
                }),
                dataIndex: 'usedPartName'
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.materialTablePanel.isCaused',
                    defaultMessage: '是否主损件'
                }),
                dataIndex: 'isCaused',
                render: text => renderBoolean(text),
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.materialTablePanel.unit',
                    defaultMessage: '计量单位'
                }),
                dataIndex: 'unit'
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.materialTablePanel.quantity',
                    defaultMessage: '数量'
                }),
                dataIndex: 'quantity'
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.materialTablePanel.price',
                    defaultMessage: '单价'
                }),
                dataIndex: 'price',
                className: styles.textAlign,
                render: text => formatAmount(text)
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.materialTablePanel.materialFee',
                    defaultMessage: '材料费合计'
                }),
                dataIndex: 'materialFee',
                className: styles.textAlign,
                render: (text, r) => formatAmount(r.quantity * r.price)
            }
        ];
        const colums = [
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.usedPartCode',
                    defaultMessage: '旧件编号'
                }),
                dataIndex: 'usedPartCode'
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.usedPartName',
                    defaultMessage: '旧件名称'
                }),
                dataIndex: 'usedPartName'
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.unit',
                    defaultMessage: '计量单位'
                }),
                dataIndex: 'unit'
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.quantity',
                    defaultMessage: '数量'
                }),
                dataIndex: 'quantity'
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.price',
                    defaultMessage: '单价'
                }),
                dataIndex: 'price',
                className: styles.textAlign,
                render: text => formatAmount(text)
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.materialFee',
                    defaultMessage: '辅料费合计'
                }),
                dataIndex: 'materialFee',
                className: styles.textAlign,
                render: (text, r) => formatAmount(r.quantity * r.price)
            }];
        const columnsWorkItem = [
            {
                title: this.props.intl.formatMessage({
                    id: 'workItemDetailPanel.usedPartCode',
                    defaultMessage: '备件编号'
                }),
                dataIndex: 'usedPartCode',
                render: (text, r) => (<Popover content={r.partProductCategoryCodes} title={this.props.intl.formatMessage({
                    id: 'workItemDetailPanel.partProductCategoryCodes',
                    defaultMessage: '车型'
                })}>
                    {text}
                </Popover>)
            }, {
                title: this.props.intl.formatMessage({
                    id: 'workItemDetailPanel.workItemCode',
                    defaultMessage: '维修项目编号'
                }),
                dataIndex: 'workItemCode'
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'workItemDetailPanel.workItemName',
                    defaultMessage: '维修项目名称'
                }),
                dataIndex: 'workItemName'
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'workItemDetailPanel.productCategoryCode',
                    defaultMessage: '车型'
                }),
                dataIndex: 'productCategoryCode'
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'workItemDetailPanel.laborHour',
                    defaultMessage: '工时'
                }),
                dataIndex: 'laborHour',
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'workItemDetailPanel.laborPrice',
                    defaultMessage: '工时单价'
                }),
                dataIndex: 'laborPrice',
                render: text => formatAmount(text)
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'workItemDetailPanel.laborFee',
                    defaultMessage: '工时费'
                }),
                dataIndex: 'laborFee',
                render: text => formatAmount(text)
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'workItemDetailPanel.remark',
                    defaultMessage: '备注'
                }),
                dataIndex: 'remark'
            }
        ];
        return (
            <div>
                <Card>
                    <DescriptionList title={<Row><Col span={6}>{this.props.intl.formatMessage({
                        id: 'commonDetail.order.title',
                        defaultMessage: '单据信息'
                    })}</Col>
                    <Col className={styles.optionBtn} span={18}>{this.props.operations}</Col></Row>}>
                        <Description term={this.props.intl.formatMessage({
                            id: 'commonDetail.operation.code',
                            defaultMessage: '索赔单号'
                        })}>{this.props.detail.code}
                        </Description>
                        <Description term={this.props.intl.formatMessage({
                            id: 'commonDetail.operation.claimApplyCode',
                            defaultMessage: '预授权单号'
                        })}>{this.props.detail.claimApplyCode}</Description>
                        <Description term={this.props.intl.formatMessage({
                            id: 'commonDetail.operation.brandCode',
                            defaultMessage: '品牌'
                        })}>{this.props.detail.brandCode}</Description>
                        <Description term={this.props.intl.formatMessage({
                            id: 'commonDetail.operation.subDealerCode',
                            defaultMessage: '经销商编号'
                        })}>{this.props.detail.subDealerCode}</Description>
                        <Description term={this.props.intl.formatMessage({
                            id: 'commonDetail.operation.subDealerName',
                            defaultMessage: '经销商名称'
                        })}>{this.props.detail.subDealerName}</Description>
                        <Description term={this.props.intl.formatMessage({
                            id: 'commonDetail.operation.subClaimCode',
                            defaultMessage: '经销商申请单号'
                        })}>{this.props.detail.subClaimCode}</Description>
                        <Description term={this.props.intl.formatMessage({
                            id: 'commonDetail.operation.currency',
                            defaultMessage: '币种'
                        })}>{conventEnumValueToString(currency, this.props.detail.currency)}</Description>
                        <Description term={this.props.intl.formatMessage({
                            id: 'commonDetail.operation.repairType',
                            defaultMessage: '索赔类型'
                        })}>{conventEnumValueToString(repairType, this.props.detail.repairType)}</Description>
                        <Description term={this.props.intl.formatMessage({
                            id: 'commonDetail.operation.faultModeCode',
                            defaultMessage: '故障原因编号'
                        })}>{this.props.detail.faultModeCode}</Description>
                        <Description term={this.props.intl.formatMessage({
                            id: 'commonDetail.operation.faultModeName',
                            defaultMessage: '故障原因名称'
                        })}>{this.props.detail.faultModeName}</Description>
                        <Description term={this.props.intl.formatMessage({
                            id: 'commonDetail.operation.faultDescription',
                            defaultMessage: '故障描述'
                        })}>{this.props.detail.faultDescription}</Description>
                        <Description term={this.props.intl.formatMessage({
                            id: 'commonDetail.operation.isOut',
                            defaultMessage: '是否外出索赔'
                        })}>{renderBoolean(this.props.detail.isOut)}</Description>
                        <Description term={this.props.intl.formatMessage({
                            id: 'commonDetail.operation.outFee',
                            defaultMessage: '外出费'
                        })}>{formatAmount(this.props.detail.outFee)}</Description>
                        <Description term={this.props.intl.formatMessage({
                            id: 'commonDetail.operation.supplierCode',
                            defaultMessage: '供应商编号'
                        })}>{this.props.detail.supplierCode}</Description>
                        <Description term={this.props.intl.formatMessage({
                            id: 'commonDetail.operation.supplierName',
                            defaultMessage: '供应商名称'
                        })}>{this.props.detail.supplierName}</Description>
                        <Description term={this.props.intl.formatMessage({
                            id: 'commonDetail.operation.dutyUnitCode',
                            defaultMessage: '责任单位编号'
                        })}>{this.props.detail.dutyUnitCode}</Description>
                        <Description term={this.props.intl.formatMessage({
                            id: 'commonDetail.operation.dutyUnitName',
                            defaultMessage: '责任单位名称'
                        })}>{this.props.detail.dutyUnitName}</Description>
                        <Description term={this.props.intl.formatMessage({
                            id: 'commonDetail.operation.partPurchasedDate',
                            defaultMessage: '自费购件时间'
                        })}>{formatDateTime(this.props.detail.partPurchasedDate, DATE_FORMAT)}</Description>
                        <Description term={this.props.intl.formatMessage({
                            id: 'commonDetail.operation.repairCode',
                            defaultMessage: '维修单号'
                        })}>{this.props.detail.repairCode}</Description>
                        <Description term={this.props.intl.formatMessage({
                            id: 'commonDetail.operation.shipmentPort',
                            defaultMessage: '维修日期'
                        })}>{formatDateTime(this.props.detail.repairDate, DATE_FORMAT)}</Description>
                    </DescriptionList>
                    <Divider />
                    <DescriptionList title={this.props.intl.formatMessage({
                        id: 'commonDetail.customer.title',
                        defaultMessage: '客户信息'
                    })}>
                        <Description term={this.props.intl.formatMessage({
                            id: 'commonDetail.operation.vin',
                            defaultMessage: 'VIN'
                        })}>{this.props.detail.vin}</Description>
                        <Description term={this.props.intl.formatMessage({
                            id: 'commonDetail.operation.mileage',
                            defaultMessage: '行驶里程'
                        })}>{this.props.detail.mileage}</Description>
                        <Description term={this.props.intl.formatMessage({
                            id: 'commonDetail.operation.engineCode',
                            defaultMessage: '发动机号'
                        })}>{this.props.detail.engineCode}</Description>
                        <Description term={this.props.intl.formatMessage({
                            id: 'commonDetail.operation.customerName',
                            defaultMessage: '用户姓名'
                        })}>{this.props.detail.customerName}</Description>
                        <Description term={this.props.intl.formatMessage({
                            id: 'commonDetail.operation.cellPhoneNumber',
                            defaultMessage: '用户电话'
                        })}>{this.props.detail.cellPhoneNumber}</Description>
                        <Description term={this.props.intl.formatMessage({
                            id: 'commonDetail.operation.saleDate',
                            defaultMessage: '实销日期'
                        })}>{formatDateTime(this.props.detail.saleDate, DATE_FORMAT)}</Description>
                        <Description term={this.props.intl.formatMessage({
                            id: 'commonDetail.operation.shippingDate',
                            defaultMessage: '发车日期'
                        })}>{formatDateTime(this.props.detail.shippingDate, DATE_FORMAT)}</Description>
                    </DescriptionList>
                </Card>
                <Card title={this.props.intl.formatMessage({
                    id: 'commonDetail.table.claimMaterialDetails',
                    defaultMessage: '材料清单'
                })}>
                    <Table
                        className="white-space-nowrap"
                        columns={columnMaterials}
                        rowKey="usedPartId"
                        pagination={false}
                        dataSource={details}
                        {...TABLE} />
                </Card>
                <Card title={this.props.intl.formatMessage({
                    id: 'commonDetail.table.workItemDetails',
                    defaultMessage: '项目清单'
                })}>
                    <Table
                        className="white-space-nowrap"
                        columns={columnsWorkItem}
                        rowKey="id"
                        pagination={false}
                        dataSource={workItemDetails}
                        {...TABLE} />
                </Card>
                <Card title={this.props.intl.formatMessage({
                    id: 'commonDetail.table.accessoryDetails',
                    defaultMessage: '辅料清单'
                })}>
                    <Table
                        className="white-space-nowrap"
                        columns={colums}
                        rowKey="usedPartId"
                        pagination={false}
                        dataSource={accessoryDetails}
                        {...TABLE} />
                </Card>
            </div>
        );
    }
}

Detail.defaultProps = {
    detail: {},
    isDetail: false,
};

Detail.propTypes = {
    detail: PropTypes.object,
    intl: PropTypes.object,
    isDetail: PropTypes.bool,
    operations: PropTypes.any
};
export default injectIntl(Detail);
